<header class="flex pt-2">
  <input nz-input type="text" class="flex-1 px-3 input" i18n-placeholder="@@Search" placeholder="Search"
    [(ngModel)]="searchValue" />
  <div class="flex items-center justify-center ml-3 text-base btn shrink-0" nzType="primary" nz-button nz-dropdown
    [nzDropdownMenu]="menu" nzPlacement="bottomRight" (click)="operateApiEvent({ event: $event, eventName: 'addAPI' })">
    <eo-iconpark-icon name="plus"></eo-iconpark-icon>
  </div>
  <nz-dropdown-menu #menu="nzDropdownMenu">
    <ul nz-menu>
      <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'addAPI' })">
        <a i18n="@@AddAPI">New API</a>
      </li>
      <li nz-menu-item (click)="addGroup()"><a i18n>New Group</a></li>
    </ul>
  </nz-dropdown-menu>
</header>
<!-- Fixed Group -->
<div class=" group_container fixed_group_tree pt10" *ngIf="electron.isElectron">
  <nz-tree [nzData]="fixedTreeNode" [nzSelectedKeys]="nzSelectedKeys" nzBlockNode (nzClick)="clickTreeItem($event)"
    [nzTreeTemplate]="nzFixedTreeTemplate"></nz-tree>
  <ng-template #nzFixedTreeTemplate let-node let-origin="origin">
    <div class="tree_node" *ngIf="node.origin?.isFixed">
      <div class="flex items-center">
        <span class="mr-2 text-sm">
          <eo-iconpark-icon name="home"> </eo-iconpark-icon>
        </span>
        <span class="text_omit node_title">{{ node.title }}</span>
      </div>
    </div>
  </ng-template>
</div>
<div class="bbd" *ngIf="electron.isElectron"></div>

<!-- Custom Group -->
<div class="group_container group_tree pt10">
  <nz-tree [nzData]="treeNodes" [nzSelectedKeys]="nzSelectedKeys" #apiGroup [nzSearchValue]="searchValue"
    [nzHideUnMatched]="true" [nzExpandedKeys]="expandKeys" (nzClick)="clickTreeItem($event)"
    (nzExpandChange)="toggleExpand()" nzDraggable nzBlockNode (nzOnDrop)="treeItemDrop($event)"
    [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
  <ng-template #nzTreeTemplate let-node let-origin="origin">
    <div [style.--tree-level]="node.level">
      <!-- Folder -->
      <div class="tree_node f_row f_js_ac" *ngIf="!node.isLeaf">
        <div class="overflow-hidden f_row_ac text-ellipsis">
          <span class="text_omit node_title">{{ node.title }}</span>
        </div>
        <span class="flex tree_node_operate">
          <button nz-dropdown [nzDropdownMenu]="groupMenu" class="flex items-center">
            <eo-iconpark-icon class="mr5" name="more" size="16px"></eo-iconpark-icon>
          </button>
          <nz-dropdown-menu #groupMenu="nzDropdownMenu">
            <ul nz-menu>
              <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'addAPI', node: node })">
                <a i18n>Add API</a>
              </li>
              <li nz-menu-item (click)="addSubGroup(node)">
                <a i18n>Add Subgroup</a>
              </li>
              <li nz-menu-item (click)="editGroup(node)">
                <a i18n>Edit</a>
              </li>
              <li nz-menu-item (click)="deleteGroup(node)">
                <a i18n="@@Delete">Delete</a>
              </li>
            </ul>
          </nz-dropdown-menu>
        </span>
      </div>
      <!-- Leaf -->
      <div class="tree_node f_row f_js_ac" *ngIf="!node.origin?.isFixed && node.isLeaf">
        <div class="overflow-hidden f_row_ac text-ellipsis">
          <b class="method_text method_text_{{ node.origin.method }} mr5" *ngIf="node.origin.method">{{
            node.origin.method
            }}</b>
          <span class="text_omit node_title">{{ node.title }}</span>
        </div>
        <div class="flex tree_node_operate">
          <button class="flex items-center"
            (click)="operateApiEvent({ event: $event, eventName: 'testApi', node: node })">
            <eo-iconpark-icon class="mr5" name="lightning" size="15px"></eo-iconpark-icon>
          </button>
          <button class="flex items-center" nz-dropdown [nzDropdownMenu]="apiDataMenu">
            <eo-iconpark-icon class="mr5" name="more" size="16px"></eo-iconpark-icon>
          </button>
          <nz-dropdown-menu #apiDataMenu="nzDropdownMenu">
            <ul nz-menu>
              <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'editApi', node: node })">
                <a i18n>Edit</a>
              </li>
              <li nz-menu-item
                (click)="operateApiEvent({ event: $event, eventName: 'copyApi', node: apiDataItems[node.key] })">
                <a i18n="@@Copy">Copy</a>
              </li>
              <li nz-menu-item
                (click)="operateApiEvent({ event: $event, eventName: 'deleteApi', node: apiDataItems[node.key] })">
                <a i18n="@@Delete">Delete</a>
              </li>
            </ul>
          </nz-dropdown-menu>
        </div>
      </div>
    </div>
  </ng-template>
</div>